<template>
  <div>
    <form @submit.prevent="beforeSubmit" method="post" class="theForm">
      <div class="stepsBox">
        <div id="stepOne"><img src="../../assets/images/step-one.png" alt="">
          <div class="iconBgBlue">
            <div class="iconWhite">1</div>
          </div>
          <span>司机信息</span>
        </div>
        <div id="stepTwo"><img src="../../assets/images/step-two-nocharge.png" alt="">
          <div class="iconBgWhite">
            <div class="iconGray">2</div>
          </div>
          <span>车辆信息</span>
        </div>
        <div id="stepThree"><img src="../../assets/images/step-three-nocharge.png" alt="">
          <div class="iconBgWhite">
            <div class="iconGray">3</div>
          </div>
          <span>等待审核</span>
        </div>
      </div>
      <div class="theBlock">
        <div class="title">
          司机信息
        </div>
        <div class="contain">
          <div>
            <span>姓名</span><input type="text" @blur="nameCheck" name="name" id="name" placeholder="请输入姓名"
              v-model="jsonObj.name" :disabled="masked" required />
          </div>
          <div>
            <span>手机号</span><input type="text" @blur="phoneCheck" name="phone" id="phone" placeholder="请输入手机号"
              v-model="jsonObj.phone" :disabled="masked" required />
          </div>
          <div>
            <span>身份证号</span><input type="text" @blur="cardNumCheck" name="cardNum" id="cardNum" placeholder="请输入身份证号"
              v-model="jsonObj.cardNum" :disabled="masked" required />
          </div>
          <div>
            <span>驾驶证有效期至</span><input type="date" @blur="licenseEndTimeCheck" name="licenseEndTime" id="licenseEndTime"
              v-model="jsonObj.licenseEndTime" :disabled="masked" required />
          </div>
          <div>
            <span>初次领证时间</span><input type="date" @blur="licenseGetTimeCheck" name="licenseGetTime" id="licenseGetTime"
              v-model="jsonObj.licenseGetTime" :disabled="masked" required />
          </div>
          <div>
            <span>准驾类型</span>
            <select name="driveType" id="driveType" v-model="jsonObj.driveType" :disabled="masked" required>
              <option value="">请选择准驾类型</option>
              <option v-for="driveType in driveTypes" :key="driveType.key">{{ driveType.value }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="theBlock">
        <div class="title">
          证件信息
        </div>
        <div class="imgContain">
          <FileUpload keyName="frontCard" @childMessage="handleChildMessage" needed="true"><span
              class="point">*</span>身份证正面
          </FileUpload>
          <FileUpload keyName="oppositeCard" @childMessage="handleChildMessage" needed="true"><span
              class="point">*</span>身份证反面
          </FileUpload>
          <FileUpload keyName="driverLicence" @childMessage="handleChildMessage" needed="true"><span
              class="point">*</span>驾驶证正面
          </FileUpload>
          <FileUpload keyName="oppositeLicence" @childMessage="handleChildMessage" needed="false">人证<span
              class="noPoint">（非必填）</span>
          </FileUpload>
        </div>
      </div>
      <div class="theBlock">
        <div class="contain">
          <div>
            <span>所在区域</span><input type="text" readonly name="area" id="area" v-model="area" />
          </div>
        </div>
      </div>
      <input type="submit" value="下一步">
    </form>
  </div>
</template>

<script>
import FileUpload from '../FileUpload.vue';
import axios from 'axios';

export default {
  name: "DriverData",
  components: {
    FileUpload,
  },
  mounted() {
    const date = new Date();    /* 今日日期 */
    const y = date.getFullYear();
    const m = date.getMonth() + 1;
    const d = date.getDate();
    if (m >= 9) {
      this.today = Number(y + '' + m + '' + d)
    } else {
      this.today = Number(y + '' + 0 + '' + m + '' + d)
    }
  },
  props: {
    masked: Boolean
  },
  data() {
    return {
      today: Number,
      driveTypes: [
        { key: 'A1', value: 'A1' },
        { key: 'A2', value: 'A2' },
        { key: 'A3', value: 'A3' },
        { key: 'B1', value: 'B1' },
        { key: 'B2', value: 'B2' },
        { key: 'C1', value: 'C1' },
        { key: 'C2', value: 'C2' },
      ],
      fileReceived: File,
      formData: new FormData(),
      jsonObj: {
        name: '',
        phone: '',
        cardNum: '',
        licenseEndTime: '',
        licenseGetTime: '',
        driveType: '',
        registePlace: '',   //注册来源 1平台注册，2代理商扫码注册，3供应商扫码注册
        proxyId: '',
        supplierId: '',
      },
      area: '',
    };
  },
  methods: {
    //获取url上的地区参数
    getQueryParam(param) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(param);
    },
    //图片放进数组
    handleChildMessage(msg) {
      this.fileReceived = msg.img;
      this.formData.append(msg.key, this.fileReceived);
    },
    beforeSubmit() {
      const postOb = {
        phone: this.jsonObj.phone,
        name: this.jsonObj.name,
        cardNum: this.jsonObj.cardNum,
      };

      axios.post('/api/driver/judge', postOb).then(res => {
        console.log(res.data.code);
        if (res.data.code == 200) {
          //formData转换为json
          this.formData.forEach((value, key) => { this.jsonObj[key] = value })
          //组件获得数据加入store
          this.$store.commit('addDriverData', this.jsonObj);
          this.$router.push({
            path: '/vehicle', query: {
              area: this.area    /* 把所在区域的值传给下个页面 */
            }
          });
        } else {
          this.$emit('dialog-trigger', res.data.msg);  /* 这里告诉父组件身份证已注册，弹出dialog */
        }
      }).catch(r => {
        const text = '检查是否已注册时错误' + r;
        window.alert(text);
      })
    },
    nameCheck() {
      let reg = /[\u4e00-\u9fff·]+/g
      if (this.jsonObj.name === '') {
        return
      } else if (!reg.test(this.jsonObj.name)) {
        this.jsonObj.name = '';
        this.$emit('dialog-trigger', '姓名格式不正确');
      }
    },
    phoneCheck() {
      let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      if (this.jsonObj.phone === '') {
        return
      } else if (!reg.test(this.jsonObj.phone)) {
        this.jsonObj.phone = '';
        this.$emit('dialog-trigger', '手机号格式不正确');
      }
    },
    cardNumCheck() {
      let reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (this.jsonObj.cardNum === '') {
        return
      } else if (!reg.test(this.jsonObj.cardNum)) {
        this.jsonObj.cardNum = '';
        this.$emit('dialog-trigger', '身份证号格式不正确');
      }
    },
    licenseEndTimeCheck() {
      let time = Number(this.jsonObj.licenseEndTime.replace(/-/g, ''))
      if (this.jsonObj.licenseEndTime === '') return;
      if (time < this.today) {
        this.jsonObj.licenseEndTime = '';
        this.$emit('dialog-trigger', '驾驶证已过期');
      }
    },
    licenseGetTimeCheck() {
      let time = Number(this.jsonObj.licenseGetTime.replace(/-/g, ''))
      if (this.jsonObj.licenseGetTime === '') return;
      if (time > this.today) {
        this.jsonObj.licenseGetTime = '';
        this.$emit('dialog-trigger', '初次领证时间不可超出今日');
      }
    },
  }
};
</script>

<style scoped>
@import "../../assets/css/style.css";

#stepOne {
  color: #ffffff;
}
</style>